<!-- 巡更管理-添加点位 -->
<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="handleCloseBindWarnStandard" :close-on-click-modal="false" :title="title" width="500px" height="300px">
    <el-form v-loading="formLoading" ref="dialogForm" :model="dialogForm" :rules="rules" label-width="120px">
      <el-form-item v-if="addType=='单个添加'&&dialogType!=='修改'" label="添加方式" prop="mobile">
        <el-button type="primary" @click="addTypeSwitch('单个添加')">单个添加</el-button>
        <el-button type="" @click="addTypeSwitch('批量导入')">批量导入</el-button>
      </el-form-item>
      <el-form-item v-else-if="dialogType!=='修改'" label="添加方式" prop="mobile">
        <el-button type="" @click="addTypeSwitch('单个添加')">单个添加</el-button>
        <el-button type="primary" @click="addTypeSwitch('批量导入')">批量导入</el-button>
      </el-form-item>
      <el-form-item label="所属单位">
        <el-select :disabled="dialogType==='修改'" v-model="dialogForm.corp_id" clearable filterable allow-create default-first-option autocomplete="off" placeholder="请选择单位名称" @change="companyChange">
          <el-option v-for="item in companyList" :key="item.corp_id" :label="item.name" :value="item.corp_id" />
        </el-select>
        <!-- <el-input v-model="dialogForm.corp_name" class="el-disabled" readonly="readonly"/> -->
      </el-form-item>
      <el-form-item v-if="addType=='单个添加'" label="所属建筑群" prop="park_id">
        <el-select :disabled="dialogType==='修改'" v-model="dialogForm.park_id" placeholder="请选择所属建筑群">
          <el-option v-for="item in parksList" :key="item.park_id" :label="item.name" :value="item.park_id" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="addType=='单个添加'" label="点位名称" prop="name">
        <el-input v-model="dialogForm.name" placeholder="请输入点位名称" autocomplete="off"/>
      </el-form-item>
      <el-form-item v-if="addType=='单个添加'" label="NFC标签" prop="nfc_code">
        <el-input v-model="dialogForm.nfc_code" placeholder="请输入NFC标签" autocomplete="off"/>
      </el-form-item>
      <el-form-item v-if="addType=='批量导入'" label="巡更点位表" prop="file" class="isButton">
        <el-input placeholder="请上传巡更点位表" autocomplete="off"/>
        <el-button type="primary" @click="downloadTemplate">下载模板</el-button>
        <input id="upload" name="excelFile" type="file" @change="upload">
        <i class="el-icon-upload2 el-input-icon" @click="importPoints"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import $ from 'jquery'
import { getSocialUnit } from '@/api/company'
import { pointPositionAdd, pointPositionImport, pointPositionUpdate } from '@/api/pointPosition'
import { parksList } from '@/api/park'
const parkList = {
  10: '建筑群10',
  12: '建筑群12',
  20: '建筑群20',
  30: '建筑群30',
  40: '建筑群40',
  50: '建筑群50',
  60: '建筑群60',
  70: '建筑群70',
  80: '建筑群80',
  90: '建筑群90'
}
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    dialogForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dialogType: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      companyList: [],
      parkList,
      title: '',
      addType: '单个添加',
      roleList: this.GLOBAL.roleList,
      parksList: [],
      // 添加form验证
      rules: {
        name: [{
          required: true,
          message: '请输入点位名称',
          trigger: 'change'
        }],
        nfc_code: [{
          required: true,
          message: '请输入NFC标签',
          trigger: 'change'
        }],
        park_id: [{
          required: true,
          message: '请选择所属建筑群',
          trigger: 'change'
        }]
      },
      requestFn: {},
      formLoading: false
    }
  },
  computed: {
  },
  watch: {
    dialogForm(val) {
      this.dialogForm = val
    }
  },
  created() {
    if (this.dialogType === '添加') {
      this.title = '添加点位'
      this.requestFn = pointPositionAdd
    } else if (this.dialogType === '修改') {
      this.title = '修改点位'
      this.getParksList()
      this.requestFn = pointPositionUpdate
    }
    this.getSocialUnit()
    // this.getParksList()pointPositionUpdate
  },
  methods: {
    submitForm(val) {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          const that = this
          that.formLoading = true
          var params = {
            corp_id: that.dialogForm.corp_id,
            park_id: that.dialogForm.park_id,
            name: that.dialogForm.name,
            nfc_code: that.dialogForm.nfc_code
          }
          if (this.dialogType === '修改') {
            params.point_id = that.dialogForm.point_id
          }
          this.requestFn(params)
            .then((res) => {
              that.formLoading = false
              that.dialogVisible = false
              const data = res.data
              if (data.code === 40000) {
                that.$message.success(data.message)
                that.$emit('submitForm', that.dialogForm)
              } else {
                that.$message.warning(data.message)
              }
            })
            .catch((err) => {
              console.log(err)
              that.formLoading = false
            })
        }
      })
    },
    // 新增用户方式切换
    addTypeSwitch(data) {
      this.addType = data
    },
    // 下载模板
    downloadTemplate() {
      var $form = $('<form method="GET"></form>')
      $form.attr('action', '/static/excels/patrolPointTemplate.xlsx')
      $form.appendTo($('body'))
      $form.submit()
    },
    // 导入巡更点
    importPoints() {
      $('#upload').click()
    },
    upload(e) {
      var file = e.target.files[0]
      const isImage = file.name.substr(file.name.length - 4) === 'xlsx'
      const that = this
      if (!isImage) {
        that.$message.warning('文件只能是 xlsx 格式!')
        return false
      }
      const image = new window.FormData()
      image.append('excelFile', file)
      var params = {
        fileType: 'file',
        data: image
      }
      pointPositionImport(params)
        .then((res) => {
          const data = res.data
          if (data.code === 40000) {
            that.$message.success(data.message)
            that.$emit('submitForm', that.dialogForm)
          } else {
            that.$message.warning(data.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 关闭弹窗
    handleCancel() {
      this.$refs['dialogForm'].resetFields()
      this.$emit('getCancel')
    },
    // 关闭弹窗，不可以删这个方法。不用这个方法点击遮罩层关闭会报错
    handleCloseBindWarnStandard() {
      this.$refs['dialogForm'].resetFields()
      this.$emit('closeBindWarnStandard')
    },
    // 获取单位下拉框
    getSocialUnit() {
      const that = this
      getSocialUnit()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            if (data.data && data.data.length > 0) {
              that.companyList = data.data
            }
          }
        })
        .catch(() => {
        })
    },
    // 单位下拉框
    companyChange(value) {
      console.log(value)
      if (value !== '') {
        this.dialogForm.park_id = ''
        this.getParksList()
      }
    },
    getParksList() {
      const that = this
      var listQuery = {
        page: 1,
        offset: 1000,
        corp_id: that.dialogForm.corp_id
      }
      parksList(listQuery)
        .then(response => {
          if (response.data.code === 40000) {
            that.parksList = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].index = index
              that.parksList.push(array[index])
            })
          }
        })
        .catch(() => {
          this.parksList = []
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
#upload{
  display: none;
}
.el-input-icon{
  cursor: pointer;
}
</style>
